<template>
  <!-- 解析jsonschema，生成表单 -->
  <div class="jsonschema-form-out">
    <!-- <el-button @click="getJsonSchemaData">获取JsonSchemaData</el-button> -->
    <div
      class="jsonschema-form-inner"
      v-for="(item, index) in JsonSchemaData['x-apifox-orders']"
      :key="'submitForm' + index"
    >
      <div class="jsonschema-form-label">{{ item }}</div>
      <div class="jsonschema-form-input">
        <template v-if="JsonSchemaData.properties[item].type === 'object'">
          <jsonschema-form
            :JsonSchemaData="JsonSchemaData.properties[item]"
            v-model="localSubmitForm[item]"
          ></jsonschema-form>
        </template>
        <template v-else-if="JsonSchemaData.properties[item].type === 'array'">
          <div class="jsonschema-form-button-box">
            <el-button @click="addArrayItem(item)">+</el-button>
          </div>
          <div
            v-for="(value, idx) in localSubmitForm[item] || []"
            :key="idx"
            class="array-item"
          >
            <el-input
              v-model="localSubmitForm[item][idx]"
              @input="updateDom"
            ></el-input>
            <el-button @click="removeArrayItem(item, idx)">-</el-button>
          </div>
        </template>
        <template v-else>
          <el-input
            v-if="JsonSchemaData.properties[item].type === 'string'"
            v-model="localSubmitForm[item]"
          ></el-input>
          <el-input
            v-else-if="JsonSchemaData.properties[item].type === 'number'"
            v-model.number="localSubmitForm[item]"
            type="number"
          ></el-input>
          <el-switch
            v-else-if="JsonSchemaData.properties[item].type === 'boolean'"
            v-model="localSubmitForm[item]"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "JsonschemaForm",
  props: {
    JsonSchemaData: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      localSubmitForm: this.value || {},
    };
  },
  watch: {
    value: {
      handler(newVal) {
        this.localSubmitForm = newVal;
      },
      deep: true,
    },
    localSubmitForm: {
      handler(newVal) {
        this.$emit("input", newVal);
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    getJsonSchemaData() {},
    addArrayItem(key) {
      if (!this.localSubmitForm[key]) {
        this.$set(this.localSubmitForm, key, []);
      }
      this.$set(
        this.localSubmitForm[key],
        this.localSubmitForm[key].length,
        ""
      );
      this.$forceUpdate();
    },
    removeArrayItem(key, index) {
      this.localSubmitForm[key].splice(index, 1);
      this.$forceUpdate();
    },
    updateDom(val) {
      this.$forceUpdate();
    },
    getJsonSchemaFormData() {
      return this.localSubmitForm;
    },
  },
};
</script>

<style scoped>
.jsonschema-form-out {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--ui-border-color-base);
}

.jsonschema-form-inner {
}

.jsonschema-form-label {
  font-size: var(--ui-font-size-semi-lg);
  color: var(--ui-text-color);
  padding: 10px 0;
}

.jsonschema-form-input {
}

.array-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.array-item .el-input {
  margin-right: 10px;
}

.jsonschema-form-button-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>